<template lang="html">
    <div class="" >
            <div class= "item" v-for="(item,index) of list" :key="index">
                    <div class="item-title border-bottom">
                        <span class="item-title-icon"></span>
                        {{item.title}}
                    </div>
                    <div class="item-children" v-if="item.chlidren" >
                            <detill-list :list="item.chlidren"></detill-list>
                    </div>
            </div>
    </div>
</template>

<script>
export default {
	name: 'DetillList',
	props: {
		list: {
			type: Array
		}
	}
}
</script>

<style lang="scss" scoped>
.item-title {
    line-height: 0.8rem;
    font-size: 0.3232rem;
    padding: 0 0.2rem;
    .item-title-icon {
        display: inline-block;
        width: 0.36rem;
        height: 0.36rem;
        top: 0.26rem;
        left: 0.2rem;
        background: url("http://s.qunarzz.com/piao/image/touch/sight/detail.png") 0 -.45rem no-repeat;
        margin-right: 0.1rem;
        background-size: 0.4rem 3rem;
        vertical-align: middle;
    }
}
.item-children {
    padding: 0 0.2rem;
}
</style>
